<template>
	<view class="">
		<view class="wrap">
			<view class="u-tabs-box">
				<view class="u-tabs" swiperwidth="750" style="background: rgb(255, 255, 255);">
					<view>
						<scroll-view class="u-scroll-view">
							<view class="uni-scroll-view">
								<view class="uni-scroll-view" style="overflow: auto hidden;">
									<view class="scroll-view-content">
										<view class="u-scroll-box u-tabs-scorll-flex">
											<view class="u-tab-item order-title " :class="typeL==index?'order-title-active':''" @click="typeBtn(index,item)" v-for="(item,index) in typeList" :key="index">
												<view>{{item}}</view>
											</view>
										</view>
										<view class="order_list">
											<view class="order_box" v-for="(item,index) in list" :key="index">
												<view class="order_box_title">
													<view>{{item.orderId}}</view>
													<view>{{statusTitle}}</view>
												</view>
												<view class="order_box_center">
													<view class="order_b_c_left">
														<!-- <image :src=""></image> -->
													</view>
													<view class="order_b_c_right">
														<view>名称</view>
														<view><span></span></view>
													</view>
												</view>
												<view class="order_box_bottom">
													{{item.create_time}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<view>
				<view class=" more-text">
					——<text>没有更多了</text>——					
				</view>
			</view>		
		</view>
	</view>
</template>

<script>
export default {
		data() {
			return {
				typeL:0,
				statusTitle:'',
				typeList:["全部","待接单","待服务","服务中","已完成","已取消"],
				navIndex: 0,
				list:[],
				page:1,
				isAtt:0,
				moreList:true
			}
		},
		onShow() {
			this.page=1
			this.lists()
		},
		onReachBottom() {
			if(this.moreList){
				this.page = this.page + 1;
				this.lists(this.page)
			}
		},
		methods: {
			typeBtn(e,f){
				this.typeL=e
				this.statusTitle=f
				this.lists()
			},
			//获取动态列表
			lists(e) {
				this.$http.getReq("/api/user/myOrder", {
					pageNum: this.page,
					pageSize: '',
					status: this.typeL
				}).then(res => {
					if(res.data.data.length!=0){
						if(e){
							this.list = this.list.concat(res.data.data);
						}else{
							this.list=res.data.data
						}
					}else{
						this.list=res.data.data
						this.page--
						this.moreList=false
					}
				});
			},
			gz(e,f){
				this.$http.postReq("/api/user/addAtt", {
					employeeId:e,
					act: f
				}).then(res => {
					if(res.code==200){
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
						this.lists()
					}
				});
			},
			like(e,f){
				this.$http.postReq("/api/user/addLike", {
					dynamicId:e,
					act: f
				}).then(res => {
					if(res.code==200){
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
						this.lists()
					}
				});
			},
			previewImage(index) {
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: this.images //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			checkIndex(index) {
				this.navIndex = index;
				this.isAtt=index
				this.page=1
				this.lists(this.page)
			}
		}
	}
</script>

<style>
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background: #F2F2F2;
	}

	.u-scroll-view {
		width: 100%;
		white-space: nowrap;
		position: relative;
	}

	.uni-scroll-view,
	.uni-scroll-view-content {
		width: 100%;
		height: 100%;
	}

	.uni-scroll-view {
		position: relative;
		-webkit-overflow-scrolling: touch;
		max-height: inherit;
	}

	.u-tabs-scorll-flex {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.u-tab-item {
		position: relative;
		display: inline-block;
		text-align: center;
		transition-property: background-color, color;
	}

	.order-title {
		height: 76rpx;
		line-height: 76rpx;
		font-size: 29rpx;
		transition-duration: 0.5s;
		flex: 1 1 0%;
		width: auto;
		color: rgb(48, 49, 51);
	}

	.order-title-active {
		font-weight: bold;
		color: rgb(242, 145, 0);
		border-bottom: rgb(242, 145, 0) solid 3px;
		/* transform: translate(21.25px, -100%); */
		transition-duration: 0.5s;
	}

	.u-tab-bar {
		position: absolute;
		bottom: 0;
		width: 20px;
		transform: translate(21.25px, -100%); 
		transition-duration: 0.5s;
		background-color: rgb(242, 145, 0);
		height: 3px;
		opacity: 1;
		border-radius: 3px;
	}

	.more-text {
		color: #E4E4E4;
		font-size: 28rpx;
		text-align: center;
	}
	.more-text text{
		color: #606266;
		margin: 4rpx 10rpx;
	}
	
	/* 订单列表 */
	.order_list{
		width:calc(100% - 20px);
		padding: 10px;
		background: #f2f2f2;
	}
	.order_box{
		width:calc(100% - 20px);
		height: 200px;
		border-radius: 10px;
		background: #fff;
		padding: 10px;
		margin-bottom: 10px;
	}
	.order_box_title{
		width: 100%;
		display:flex;
		justify-content: space-between;
		line-height: 30px;
	}
	.order_box_center{
		width: 100%;
		height: calc(100% - 60px);
		display:flex;
		justify-content: space-between;
	}
	.order_b_c_left{
		width: 200px;
		height: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.order_box_bottom{
		width: 100%;
		display:flex;
		justify-content: space-between;
		line-height: 30px;
	}
</style>
